<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";
// 导入图标工具
import { Search, ArrowRight } from "@/utils/icons.js";
import type { TabsPaneContext } from "element-plus";
import hotJobs from "./components/hotJobs.vue";
import hotCompanys from "./components/hotCompanys.vue";

/*热招职位信息接口定义*/
interface Job {
    id: string;
    title: string;
    salary: string;
    location: string;
    experience: string;
    education: string;
    company: string;
    industry: string;
    financing: string;
}

interface Industry {
    label: string;
    value: string;
}

interface Company {
    id: string;
    name: string;
    scale: string;
    type: string;
    tags: string[];
    jobs: {
        title: string;
        salary: string;
        location: string;
        experience: string;
        education: string;
    }[];
}

const router = useRouter();

const bannerList = ref([
    {
        url: "http://cdn.wingtrace.cn/img/banner/vbanner01.jpg",
        name: "轮播图1",
    },
    {
        url: "http://cdn.wingtrace.cn/img/banner/vbanner02.jpg",
        name: "轮播图2",
    },
]);
const searchKeyword = ref("");
// 热门搜索关键词
const hotKeywords = ref(["前端开发", "Java工程师", "产品经理", "UI设计师", "测试工程师", "数据分析师", "运营专员"]);

// 当前选中的行业
const activeIndustry = ref("sales");
// 行业列表数据
const industries = ref([
    { label: "销售", value: "sales" },
    { label: "供应链/物流", value: "supply-chain" },
    { label: "客服/运营", value: "service" },
    { label: "直播/影视/传媒", value: "media" },
    { label: "服务业", value: "service-industry" },
    { label: "生产制造", value: "manufacturing" },
    { label: "市场/公关/广告", value: "marketing" },
    { label: "教育培训", value: "education" },
    { label: "金融", value: "finance" },
]);

// 职位模板数据，按行业分类
const jobTemplates = {
    sales: [
        { title: "大客户销售经理", salary: "15-30K", company: "华为技术" },
        { title: "渠道销售专员", salary: "8-15K", company: "联想集团" },
        { title: "医药代表", salary: "10-20K", company: "辉瑞制药" },
    ],
    "supply-chain": [
        { title: "物流调度主管", salary: "12-18K", company: "顺丰速运" },
        { title: "采购专员", salary: "8-12K", company: "京东物流" },
        { title: "仓储经理", salary: "15-25K", company: "菜鸟网络" },
    ],
    media: [
        { title: "短视频编导", salary: "10-20K", company: "字节跳动" },
        { title: "影视后期制作", salary: "12-25K", company: "爱奇艺" },
        { title: "直播运营", salary: "8-15K", company: "淘宝直播" },
    ],
    // 其他行业数据...
};

// 职位列表数据
const jobs = ref(generateJobs("sales"));

// 生成职位数据函数
function generateJobs(industry: string) {
    return [...Array(9)].map((_, index) => {
        const template = jobTemplates[industry][index % 3];
        return {
            id: `job-${industry}-${index}`,
            title: template.title,
            salary: template.salary,
            location: ["北京", "上海", "广州"][index % 3],
            experience: `${Math.floor(index / 3) + 1}-${Math.floor(index / 3) + 3}年`,
            education: ["大专", "本科", "硕士"][index % 3],
            company: template.company,
            industry: ["互联网", "制造业", "服务业"][index % 3],
            financing: ["未融资", "A轮", "B轮"][index % 3],
        };
    });
}

// 企业模板数据
const companyTemplates = [
    {
        name: "美团",
        scale: "10000人以上",
        type: "已上市",
        tags: ["即时配送", "生活服务", "互联网"],
        jobs: [
            {
                title: "骑手调度专员",
                salary: "9-12K",
                location: "北京",
                experience: "1-3年",
                education: "大专",
            },
            {
                title: "商户运营经理",
                salary: "15-20K",
                location: "上海",
                experience: "3-5年",
                education: "本科",
            },
        ],
    },
    {
        name: "新东方",
        scale: "5000-9999人",
        type: "不需要融资",
        tags: ["教育培训", "K12", "在线教育"],
        jobs: [
            {
                title: "学科讲师",
                salary: "15-25K",
                location: "广州",
                experience: "3-5年",
                education: "硕士",
            },
            {
                title: "课程顾问",
                salary: "8-12K",
                location: "深圳",
                experience: "1-3年",
                education: "本科",
            },
        ],
    },
    {
        name: "蚂蚁集团",
        scale: "10000人以上",
        type: "已上市",
        tags: ["互联网金融", "科技金融", "区块链"],
        jobs: [
            {
                title: "风控算法工程师",
                salary: "30-50K",
                location: "杭州",
                experience: "5-10年",
                education: "博士",
            },
            {
                title: "产品经理",
                salary: "25-40K",
                location: "上海",
                experience: "5-8年",
                education: "硕士",
            },
        ],
    },
];

// 生成企业数据函数
function generateCompanies() {
    return [...Array(9)].map((_, index) => {
        const template = companyTemplates[index % 3];
        return {
            ...template,
            id: `company-${index}`,
            jobs: template.jobs.map((job) => ({
                ...job,
                location: ["北京", "上海", "广州"][index % 3],
                experience: `${Math.floor(index / 3) + 1}-${Math.floor(index / 3) + 3}年`,
            })),
        };
    });
}

// 热门企业数据
const companies = ref(generateCompanies());

// 行业选择处理函数
const handleTabClick = (tab: TabsPaneContext) => {
    activeIndustry.value = tab.props.name as string;
    jobs.value = generateJobs(tab.props.name as string);
    console.log("Tab clicked:", tab); // 添加日志便于调试
};

// 搜索处理函数
const handleSearch = () => {
    if (!searchKeyword.value.trim()) {
        return;
    }
    // 跳转到搜索页面
    router.push({
        path: "/position",
        query: {
            keyword: searchKeyword.value.trim(),
        },
    });
};

// 热门关键词点击处理函数
const handleHotKeywordClick = (keyword: string) => {
    searchKeyword.value = keyword;
    handleSearch();
};

// 查看更多职位处理函数
const handleViewMore = () => {
    // 实际应调用API获取更多数据
    jobs.value = [...jobs.value, ...generateJobs(activeIndustry.value)];
};

// 生命周期
onBeforeMount(() => {});
onMounted(() => {});
onUnmounted(() => {});
</script>

<template>
    <div class="scroll_main">
        <div class="page-container">
            <!-- 头部组件 -->
            <headerIndex></headerIndex>
            <el-container>
                <el-main>
                    <el-carousel :interval="5000" motion-blur height="400px">
                        <el-carousel-item v-for="item in bannerList" :key="item">
                            <el-image :src="item.url" />
                        </el-carousel-item>
                    </el-carousel>

                    <!-- 搜索框模块 -->
                    <div class="search-container" style="margin-top: 60px">
                        <div class="search-box">
                            <div class="tech-search-container">
                                <el-input
                                    v-model="searchKeyword"
                                    placeholder="请输入职位/公司关键词"
                                    class="tech-search-input"
                                    @keyup.enter="handleSearch"
                                >
                                    <template #prefix>
                                        <el-icon class="search-icon">
                                            <Search />
                                        </el-icon>
                                    </template>
                                </el-input>
                                <el-button class="search-btn" type="primary" @click="handleSearch">
                                    <span class="btn-text">智能搜索</span>
                                    <el-icon class="btn-icon"><ArrowRight /></el-icon>
                                </el-button>
                            </div>
                        </div>

                        <!-- 热门搜索建议 -->
                        <div class="search-suggestions">
                            <div class="suggestions-title">热门搜索</div>
                            <div class="suggestion-tags">
                                <el-tag
                                    v-for="(tag, index) in hotKeywords"
                                    :key="index"
                                    class="suggestion-tag"
                                    @click="handleHotKeywordClick(tag)"
                                >
                                    {{ tag }}
                                </el-tag>
                            </div>
                        </div>
                    </div>

                    <!-- 热招职位模块 -->
                    <hot-jobs
                        :jobs="jobs"
                        :industries="industries"
                        :active-industry="activeIndustry"
                        @tab-click="handleTabClick"
                        @view-more="handleViewMore"
                    />

                    <!-- 热门企业模块 -->
                    <hot-companys :companies="companies" @view-more="handleViewMore" />
                </el-main>
            </el-container>
            <!-- 底部组件 -->
            <footerIndex></footerIndex>
        </div>
        <el-backtop :bottom="80" target=".scroll_main" />
    </div>
</template>

<style lang="less" scoped>
.page-container {
    max-width: 100vw;
    overflow-x: hidden;
}

.el-main {
    --el-main-padding: 0;
}
/* 搜索框样式 */
.tech-search-container {
    display: flex;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(127, 127, 213, 0.3);
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
        box-shadow: 0 15px 40px rgba(127, 127, 213, 0.4);
        transform: translateY(-2px);
    }

    :deep(.el-input) {
        flex: 1;

        .el-input__wrapper {
            padding: 0 25px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            border: none;
            border-radius: 50px 0 0 50px;
            box-shadow: none;

            .el-input__inner {
                font-size: 16px;
                color: #333;
            }
        }
    }

    .search-icon {
        font-size: 18px;
        color: #7f7fd5;
        margin-right: 10px;
        transition: all 0.3s;
    }

    .search-btn {
        height: 60px;
        padding: 0 30px;
        border-radius: 0 50px 50px 0;
        background: linear-gradient(135deg, #7f7fd5, #86a8e7);
        border: none;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: linear-gradient(135deg, #6a6ac5, #7598d7);
            box-shadow: 0 5px 15px rgba(127, 127, 213, 0.4);

            .btn-icon {
                transform: translateX(3px);
            }
        }

        .btn-text {
            margin-right: 8px;
        }

        .btn-icon {
            transition: all 0.3s;
            font-size: 14px;
        }
    }
}

/* 热招职位样式 */
.hot-jobs {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;

    .section-title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 32px;
        font-weight: 600;
    }

    /* 职位列表样式 */
    .job-list {
        margin: 0 -10px;
    }

    /* 职位卡片样式 */
    .job-card-col {
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .job-card {
        height: 100%;
        transition: all 0.3s;
        border-radius: 8px;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            padding: 12px 16px;

            .job-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;

                span:first-child {
                    font-size: 16px;
                    font-weight: 600;
                }

                .salary {
                    color: #f56c6c;
                    font-weight: bold;
                    font-size: 18px;
                }
            }

            .job-requirements {
                color: #999;
                font-size: 12px;
                display: flex;
                align-items: center;

                :deep(.el-divider) {
                    margin: 0 8px;
                    background-color: #ddd;
                }
            }
        }

        .company-info {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .company-left {
                display: flex;
                align-items: center;

                .el-icon {
                    margin-right: 8px;
                    color: #409eff;
                    font-size: 18px;
                }
            }

            .company-right {
                display: flex;
                align-items: center;
                gap: 8px;

                .el-tag {
                    border-radius: 4px;
                }
            }
        }
    }

    /* 查看更多按钮样式 */
    .view-more-container {
        text-align: center;
        margin-top: 10px;

        .view-more {
            padding: 12px 40px;
            background-color: #e6f7ff;
            border-color: #1890ff;
            color: #1890ff;
            font-weight: bold;
            transition: all 0.3s;

            &:hover {
                background-color: #1890ff;
                color: white;
            }
        }
    }
}

/* 热门企业样式 */
.hot-companies {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px;

    .section-title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 32px;
        font-weight: 600;
    }

    /* 企业卡片样式 */
    .company-col {
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .company-card {
        height: 100%;
        transition: all 0.3s;
        border-radius: 12px;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }

        :deep(.el-card__header) {
            padding: 20px;
        }

        .company-header {
            .company-title {
                display: flex;
                align-items: center;
                margin-bottom: 12px;

                .el-icon {
                    font-size: 24px;
                    color: #409eff;
                    margin-right: 8px;
                }

                span {
                    font-size: 20px;
                    font-weight: 600;
                }
            }

            .company-meta {
                color: #666;
                font-size: 14px;
                margin-bottom: 12px;
                display: flex;
                align-items: center;

                :deep(.el-divider) {
                    margin: 0 8px;
                    background-color: #ddd;
                }
            }

            .company-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;

                .tag-item {
                    border-radius: 4px;
                    background: #f5f7fa;
                    border-color: #e4e7ed;
                }
            }
        }

        /* 企业职位列表样式 */
        .job-list {
            padding: 0 20px;

            .job-item {
                padding: 16px 0;
                border-bottom: 1px solid #eee;

                &:last-child {
                    border-bottom: none;
                }

                .job-main {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 8px;

                    .job-name {
                        font-size: 15px;
                        font-weight: 500;
                    }

                    .job-salary {
                        color: #f56c6c;
                        font-weight: 600;
                    }
                }

                .job-meta {
                    color: #999;
                    font-size: 12px;
                    display: flex;
                    align-items: center;

                    :deep(.el-divider) {
                        margin: 0 6px;
                        background-color: #ddd;
                    }
                }
            }
        }

        /* 卡片底部样式 */
        .card-footer {
            text-align: center;
            padding: 0 20px 20px;

            .view-detail {
                width: 100%;
                background: #e6f7ff;
                border-color: #1890ff;
                color: #1890ff;
                transition: all 0.3s;

                &:hover {
                    background: #1890ff;
                    color: white;
                }
            }
        }
    }

    /* 查看更多按钮样式 */
    .view-more-container {
        text-align: center;
        margin-top: 20px;

        .view-more {
            padding: 12px 40px;
            background-color: #e6f7ff;
            border-color: #1890ff;
            color: #1890ff;
            font-weight: bold;
            transition: all 0.3s;

            &:hover {
                background-color: #1890ff;
                color: white;
            }
        }
    }
}

/* 热门搜索建议样式 */
.search-suggestions {
    margin-top: 20px;
    text-align: center;

    .suggestions-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .suggestion-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;

        .suggestion-tag {
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 15px;
            padding: 0 15px;
            height: 28px;
            line-height: 28px;

            &:hover {
                background-color: #7f7fd5;
                color: white;
            }
        }
    }
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
    .hot-jobs {
        padding: 20px 10px;

        .industry-nav {
            :deep(.el-menu-item) {
                margin: 0 8px;
                font-size: 14px;
            }
        }

        .job-card-col {
            padding: 0 5px;
        }

        .job-card {
            .card-header {
                padding: 8px 12px;

                .job-title {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 8px;
                }
            }

            .company-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }
    }

    /* 桌面端底部导航样式 */
    :deep(.footer-container) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        max-width: 1400px;
        margin: 0 auto;

        .footer-section {
            display: flex;
            align-items: center;
            gap: 30px;

            &.footer-links a {
                padding: 0 15px;
                white-space: nowrap;
            }

            &.footer-social .social-icon {
                width: 28px;
                height: 28px;
            }

            &.footer-copyright {
                font-size: 14px;
                color: #666;
            }
        }
    }

    /* 移动端底部导航样式 */
    @media (max-width: 768px) {
        :deep(.footer-container) {
            flex-direction: column;
            gap: 25px;
            padding: 30px 20px;
            text-align: center;

            .footer-section {
                flex-direction: column;
                gap: 15px;
                width: 100%;

                &.footer-links {
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                }

                &.footer-social {
                    flex-direction: row;
                    justify-content: center;
                }
            }
        }
    }
}
</style>
